<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">地址列表</p>
        </div>
        <div class="view-container">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                        class="btn-success"
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        @click="add()"
                        v-hasPermi="['system:memberAddress:insert']"
                    >新建</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                        class="btn-success"
                        type="primary"
                        icon="el-icon-back"
                        size="mini"
                        @click="back()"
                    >返回</el-button>
                </el-col>
            </el-row>
            <el-table v-loading="loading" :data="list" border>
                <el-table-column label="序号" type="index" align="center" width="50">
                    <template slot-scope="scope">
                        <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="收货人"  align="center" prop="name" />
                <el-table-column label="收货地址" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.province !== null ? scope.row.province : '' }}{{ scope.row.city !== null ? scope.row.city : '' }}{{ scope.row.area !== null ? scope.row.area : '' }}{{ scope.row.address !== null ? scope.row.address : '' }}
                    </template>
                </el-table-column>
                <el-table-column label="是否默认" align="center" prop="acquiescence">
                    <template slot-scope="scope">
                        <template v-if="scope.row.acquiescence == '1'">
                            <el-radio v-model="scope.row.acquiescence" :label="1">默认</el-radio>
                        </template>
                        <template v-else>
                            <el-radio v-model="radio" label="0" @change="val => handleEdit(val, scope.row)">默认</el-radio>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="200px;" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                            class="btn-success width80"
                            type="primary"
                            size="mini"
                            @click="handleUpdate(scope.row)"
                            v-hasPermi="['system:memberAddress:update']"
                        >编辑</el-button>
                        <el-button
                            class="btn-delete width80"
                            type="primary"
                            size="mini"
                            @click="handleDelete(scope.row)"
                            v-hasPermi="['system:memberAddress:deleteById']"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </div>
    </div>
</template>

<script>
import { addressList, addressDel, addressUpdate } from "@/api/system/member/member"
export default {
    name: "list",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 列表数据
            list: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                memberInformationId: this.$route.query.data.memberInformationId,
            },
            radio: ''
        }
    },
    created() {
        this.getList()
        // console.log(this.$route.query.data.memberInformationId)
        if(this.$route.query.data.memberInformationId == undefined){
            this.$tab.closeOpenPage({path:"/customer/member/list"})
        }
    },
    methods: {
        // 获取列表
        getList() {
            this.loading = true
            addressList(this.addDateRange(this.queryParams)).then(res => {
                this.list = res.rows
                this.total = res.total
                this.loading = false
            })
        },
        // 搜索按钮
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        // 重置按钮
        resetQuery() {
            this.resetForm("queryForm")
            this.handleQuery()
        },
        // 新建
        add(){
            this.$router.push({path:"/customer/member/address/add", query:{type: 'memberEdit', data: this.$route.query.data}})
        },
        // 返回
        back(){
            if(this.$route.query.type == 'memberEdit'){
                this.$tab.closeOpenPage({path:"/customer/member/edit", query:{id: this.$route.query.data.memberInformationId}})
            }else{
                this.$tab.closeOpenPage({path:"/customer/member/add", query:{data: this.$route.query.data}})
            }
        },
        // 编辑
        handleUpdate(row) {
            this.$router.push({path:"/customer/member/address/edit", query:{ id: row.memberAddressId, type: 'memberEdit', data: this.$route.query.data }})
        },
        // 删除
        handleDelete(row){
            this.$modal.confirm('是否确认删除当前数据？', '删除').then(() => {
                addressDel(row.memberAddressId).then(res => {
                    if(res.code == 200){
                        this.$modal.msgSuccess("删除成功")
                        this.getList()
                    }
                })
            }).catch(() => {})
        },
        // 编辑默认
        handleEdit(val, row){
            addressUpdate({memberInformationId: row.memberInformationId,memberAddressId: row.memberAddressId, acquiescence: 1}).then(res => {
                if(res.code == 200){
                    this.$modal.msgSuccess("编辑成功")
                    this.$tab.refreshPage()
                }
            })
        }
    }
}
</script>